<script>
	import ZPMixin from "@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin";
	import config from "./config.js";
	import {
		checkFlightInformation,
		queryPortInformation
	} from "@/api/mall";

	export default {
		name: "list",
		mixins: [ZPMixin],
		data() {
			return {
				// 路由传参
				fromPortId: "",
				toPortId: "",
				selectedDate: "",
				cabinid: "", //座舱ID
				// 港口数据
				portList: [], // 港口信息
				cities: [], // 港口名称数组，用于picker显示

				// 当前选中的港口信息
				fromCity: "",
				toCity: "",

				// 日期选择相关
				currentDateIndex: 0,
				dateList: [],

				// 船票列表
				tickets: [],

				// 当前展开的船票ID（手风琴模式，只展开一个）
				activeTicketId: null,

				// 城市索引
				fromCityIndex: 0,
				toCityIndex: 0,

				// 是否在切换城市
				isSwapping: false,

				// 日期选择器范围
				datePickerStart: "",
				datePickerEnd: "",

				// 节流控制
				throttleTimer: null,
			};
		},
		async onLoad(options) {
			console.log(options);

			// 先获取港口数据
			await this.initPortData();

			// 获取路由参数
			let {
				from,
				to,
				date,
				cabinid
			} = options;

			// from=39;
			// to=44;
			// date='2025-07-09';
			// tripType=0;

			this.fromPortId = from;
			this.toPortId = to;
			this.selectedDate = date || this.getFormattedDate(new Date());
			this.cabinid = cabinid;
			// 根据港口ID设置城市名称和索引
			this.setPortInfo();

			// 生成日期列表（今天和未来6天）
			this.generateDateList();

			// 设置日期选择器范围
			const today = new Date();
			this.datePickerStart = this.getFormattedDate(today);

			// 设置结束日期为15天后
			const endLimit = new Date();
			endLimit.setDate(endLimit.getDate() + 15);
			this.datePickerEnd = this.getFormattedDate(endLimit);
		},
		computed: {
			safeAreaTop() {
				return this.$store.state.app.wxMenuClient ?
					this.$store.state.app.wxMenuClient.top :
					0;
			},
		},
		watch: {
			"$i18n.locale"() {
				// 监听语言变化，重新设置导航栏标题并重新生成日期列表
				this.generateDateList();
			},
		},
		methods: {
			// 初始化港口数据
			async initPortData() {
				try {
					const res = await queryPortInformation();
					if (res && res.Data && Array.isArray(res.Data)) {
						this.portList = res.Data;
						// 提取港口中文名称用于picker显示
						this.cities = res.Data.map((port) => port.portCName);
						console.log("港口数据加载成功:", this.portList);
					}
				} catch (error) {
					console.error("获取港口数据失败:", error);
					// 失败时使用默认数据
					this.cities = ["桂山岛", "东澳岛", "外伶仃岛", "大万山岛"];
					uni.showToast({
						title: this.$t("ticket.list.portDataLoadFailed"),
						icon: "none",
					});
				}
			},

			// 根据港口ID设置港口信息
			setPortInfo() {
				if (this.portList.length === 0) return;

				// 根据港口ID查找对应的港口信息
				const fromPort = this.portList.find(
					(port) => port.portID === this.fromPortId
				);
				const toPort = this.portList.find(
					(port) => port.portID === this.toPortId
				);

				if (fromPort) {
					this.fromCity = fromPort.portCName;
					this.fromCityIndex = this.portList.findIndex(
						(port) => port.portID === this.fromPortId
					);
				}

				if (toPort) {
					this.toCity = toPort.portCName;
					this.toCityIndex = this.portList.findIndex(
						(port) => port.portID === this.toPortId
					);
				}

				// 如果没有找到对应的港口，使用默认值
				if (this.fromCityIndex === -1) this.fromCityIndex = 0;
				if (this.toCityIndex === -1) this.toCityIndex = 1;
			},

			// 生成日期列表
			generateDateList() {
				const today = new Date();
				this.dateList = [];

				for (let i = 0; i < 7; i++) {
					const date = new Date();
					date.setDate(today.getDate() + i);

					const month = date.getMonth() + 1;
					const day = date.getDate();
					const weekdays = [
						this.$t("common.weekdays.sunday"),
						this.$t("common.weekdays.monday"),
						this.$t("common.weekdays.tuesday"),
						this.$t("common.weekdays.wednesday"),
						this.$t("common.weekdays.thursday"),
						this.$t("common.weekdays.friday"),
						this.$t("common.weekdays.saturday"),
					];
					const weekday = weekdays[date.getDay()];

					let label = "";
					if (i === 0) {
						label = this.$t("common.today");
					} else if (i === 1) {
						label = this.$t("common.tomorrow");
					} else if (i === 2) {
						label = this.$t("common.dayAfterTomorrow");
					} else {
						label = weekday;
					}

					this.dateList.push({
						date: this.getFormattedDate(date),
						month: month,
						day: day < 10 ? "0" + day : day,
						label: label,
						weekday: weekday,
					});
				}
			},

			// 获取格式化的日期字符串 YYYY-MM-DD
			getFormattedDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, "0");
				const day = String(date.getDate()).padStart(2, "0");
				return `${year}-${month}-${day}`;
			},

			// 选择日期
			selectDate(index) {
				this.currentDateIndex = index;
				this.selectedDate = this.dateList[index].date;
				// 重新加载船票列表
				this.$refs.paging.reload();
			},

			// 打开日历选择器
			openCalendar() {
				uni.showToast({
					title: "打开日历选择器",
					icon: "none",
				});
			},

			// 日期变更处理
			onDateChange(date) {
				this.selectedDate = date;

				// 找到对应的日期索引并更新
				const index = this.dateList.findIndex((item) => item.date === date);
				if (index !== -1) {
					this.currentDateIndex = index;
				}

				// 重新加载船票列表
				this.$refs.paging.reload();
			},

			// 改变日期（往前或往后）带节流
			navigateDate(direction) {
				// 如果节流定时器存在，说明操作太频繁，直接返回
				if (this.throttleTimer) {
					return;
				}

				// 设置1秒的节流定时器
				this.throttleTimer = setTimeout(() => {
					this.throttleTimer = null;
				}, 1000);

				// direction: -1表示前一天，1表示后一天
				const currentDate = new Date(this.selectedDate);
				currentDate.setDate(currentDate.getDate() + direction);

				// 检查是否在允许的日期范围内
				const today = new Date();
				today.setHours(0, 0, 0, 0);

				if (direction < 0 && currentDate < today) {
					// 不能选择今天之前的日期
					uni.showToast({
						title: this.$t("ticket.list.cannotSelectPastDate"),
						icon: "none",
					});
					return;
				}

				const maxDate = new Date(this.datePickerEnd);
				if (direction > 0 && currentDate > maxDate) {
					// 不能选择超过最大限制的日期
					uni.showToast({
						title: this.$t("ticket.list.dateOutOfRange"),
						icon: "none",
					});
					return;
				}

				// 更新选中的日期
				this.selectedDate = this.getFormattedDate(currentDate);

				// 找到对应的日期索引并更新
				const index = this.dateList.findIndex(
					(item) => item.date === this.selectedDate
				);
				if (index !== -1) {
					this.currentDateIndex = index;
				}

				// 重新加载船票列表
				this.$refs.paging.reload();
			},

			// 切换船票展开/折叠状态（手风琴模式）
			toggleTicketExpand(ticketId) {
				// 如果点击当前已展开的，则关闭它
				if (this.activeTicketId === ticketId) {
					this.activeTicketId = null;
				} else {
					// 否则切换到新点击的船票
					this.activeTicketId = ticketId;
				}
			},

			defineFlight(ticket) {
			console.log("ticket =>",ticket);

				// 获取对应座位类型的座位数
				let seatCount = 0;
				let cabinInfo = null;
				let seatType = 'regular'
				// 根据座位类型找到对应的舱位信息
				ticket.cabinList.map(v => {
					if (v.CabinID == this.cabinid) {
						seatCount = v.SeatCount
						cabinInfo = v
					}
				})
				if (cabinInfo.CabinCode == 'PTC') {
					seatType = 'regular'
				} else if (cabinInfo.CabinCode == 'PTC') {
					seatType = 'vip'
				} else {
					seatType = 'luxury'
				}
				// 如果座位数为0，则提示无法预订
				if (seatCount <= 0) {
					uni.showToast({
						title: this.$t("ticket.list.seatSoldOut"),
						icon: "none",
					});
					return;
				}
				// 构建预订参数，补全所有航班和座位信息
				const bookingParams = {
					departureId: ticket.id,
					classNo: ticket.classNo,
					departureTime: ticket.departureTime,
					arrivalTime: ticket.arrivalTime,
					duration: ticket.duration,
					shipName: ticket.shipName,
					seatType: seatType,
					cabinId: cabinInfo ? cabinInfo.CabinID : "",
					cabinCode: cabinInfo ? cabinInfo.CabinCode : "",
					from: this.fromCity,
					to: this.toCity,
					departureDate: this.selectedDate,
					orderType: "0", // 单程
					startPortId: this.fromPortId,
					arrivePortId: this.toPortId,
				};
				console.log(bookingParams);

				const paramStr = Object.keys(bookingParams)
					.map((key) => `${key}=${encodeURIComponent(bookingParams[key])}`)
					.join("&");
				uni.navigateTo({
					url: `/ticket_subpages/index/rebook?${paramStr}`,
				});
			},

			// 加载船票列表
			queryList(pageNo, pageSize) {
				// 如果有港口ID，调用真实接口
				if (this.fromPortId && this.toPortId) {
					checkFlightInformation({
							StartPortId: this.fromPortId,
							ArrivePortId: this.toPortId,
							DepartDate: this.selectedDate,
						})
						.then((res) => {
							// 处理接口返回的数据
							const rawTickets = res.Data || [];
							const tickets = this.transformTicketData(rawTickets);
							this.$refs.paging.complete(tickets);
						})
						.catch((error) => {
							console.error("获取船票信息失败:", error);
							this.$refs.paging.complete([]);
						});
				} else{
					let timer = setTimeout(()=>{
						this.queryList(1,10);
						clearTimeout(timer);
						let timer = null
					},1500)
				}
			},

			// 转换接口数据为页面展示格式
			transformTicketData(rawTickets) {
				return rawTickets.map((ticket) => {
					// 计算出发和到达时间
					const departureTime = ticket.DepartTime || "";
					let arrivalTime = ticket.ArrivalTime || "";

					// 如果没有到达时间，根据出发时间和班次分钟数计算
					if (!arrivalTime && ticket.ClassMinute) {
						const [hours, minutes] = departureTime.split(":");
						const departMinutes = parseInt(hours) * 60 + parseInt(minutes);
						const arrivalMinutes = departMinutes + parseInt(ticket.ClassMinute);
						const arrivalHours = Math.floor(arrivalMinutes / 60);
						const arrivalMins = arrivalMinutes % 60;
						arrivalTime = `${String(arrivalHours).padStart(2, "0")}:${String(
            arrivalMins
          ).padStart(2, "0")}`;
					}

					// 获取舱位信息，只保留有QP票价的舱位
					const cabins = (ticket.CabinList || [])
						.map((cabin) => {
							const qpPrice = (cabin.PriceList || []).find(
								(p) => p.TicketTypeCode === "QP"
							);
							return qpPrice ?
								{
									...cabin,
									QPPrice: qpPrice.TicketPrice,
									QPTicket: qpPrice,
								} :
								null;
						})
						.filter(Boolean);

					// 统计各舱位座位数和价格
					let regularSeats = 0,
						vipSeats = 0,
						luxurySeats = 0;
					let regularPrice = null,
						vipPrice = null,
						luxuryPrice = null;
					//显示改签前的同等座舱的价格
					let minPrice = 0;
					cabins.forEach((cabin) => {
						if (cabin.CabinCode === "PTC") {
							regularSeats = cabin.SeatCount || 0;
							regularPrice = cabin.QPPrice;
						} else if (cabin.CabinCode === "TDC") {
							vipSeats = cabin.SeatCount || 0;
							vipPrice = cabin.QPPrice;
						} else if (cabin.CabinCode === "GBC") {
							luxurySeats = cabin.SeatCount || 0;
							luxuryPrice = cabin.QPPrice;
						}
						if (cabin.CabinID == this.cabinid) {
							minPrice = cabin.QPPrice;
						}
					});
					// 页面主价优先普通舱，其次头等舱，再次贵宾舱
					// let minPrice = regularPrice ?? vipPrice ?? luxuryPrice ?? 0;

					return {
						id: ticket.ClassID,
						classNo: ticket.ClassNo,
						departureTime: departureTime,
						arrivalTime: arrivalTime,
						departurePlace: ticket.StartPortName || this.fromCity,
						arrivalPlace: ticket.ArrivePortName || this.toCity,
						duration: ticket.ClassMinute ?
							`${ticket.ClassMinute}${this.$t("ticket.list.minutes")}` :
							`50${this.$t("ticket.list.minutes")}`,
						shipName: ticket.ShipName || this.$t("ticket.list.newHaizhu"),
						price: minPrice,
						totalSeats: ticket.SeatCount || 0,
						regularSeats: regularSeats,
						vipSeats: vipSeats,
						luxurySeats: luxurySeats,
						regularPrice,
						vipPrice,
						luxuryPrice,
						cabinList: cabins, // 只包含有QP票价的舱位
						rawData: ticket, // 保存原始数据
					};
				});
			},

			// 预订船票
			bookTicket(ticket, event, seatType) {
				// 阻止事件冒泡，避免触发折叠面板
				event.stopPropagation();
				// 获取对应座位类型的座位数
				let seatCount = 0;
				let cabinInfo = null;
				// 根据座位类型找到对应的舱位信息
				if (ticket.cabinList) {
					for (let cabin of ticket.cabinList) {
						if (
							(seatType === "regular" && cabin.CabinCode === "PTC") ||
							(seatType === "vip" && cabin.CabinCode === "TDC") ||
							(seatType === "luxury" && cabin.CabinCode === "GBC")
						) {
							seatCount = cabin.SeatCount || 0;
							cabinInfo = cabin;
							break;
						}
					}
				} else {
					// 兼容旧数据格式
					if (seatType === "regular") {
						seatCount = ticket.regularSeats || 0;
					} else if (seatType === "vip") {
						seatCount = ticket.vipSeats || 0;
					} else if (seatType === "luxury") {
						seatCount = ticket.luxurySeats || 0;
					}
				}
				// 如果座位数为0，则提示无法预订
				if (seatCount <= 0) {
					uni.showToast({
						title: this.$t("ticket.list.seatSoldOut"),
						icon: "none",
					});
					return;
				}
				// 构建预订参数，补全所有航班和座位信息
				const bookingParams = {
					departureId: ticket.id,
					classNo: ticket.classNo,
					departureTime: ticket.departureTime,
					arrivalTime: ticket.arrivalTime,
					duration: ticket.duration,
					shipName: ticket.shipName,
					seatType: seatType,
					cabinId: cabinInfo ? cabinInfo.CabinID : "",
					cabinCode: cabinInfo ? cabinInfo.CabinCode : "",
					from: this.fromCity,
					to: this.toCity,
					departureDate: this.selectedDate,
					orderType: "0", // 单程
					startPortId: this.fromPortId,
					arrivePortId: this.toPortId,
				};
				console.log(bookingParams);

				const paramStr = Object.keys(bookingParams)
					.map((key) => `${key}=${encodeURIComponent(bookingParams[key])}`)
					.join("&");
				uni.navigateTo({
					url: `/ticket_subpages/index/rebook?${paramStr}`,
				});
			},

			// 出发城市选择变化
			bindFromCityChange(e) {
				const index = e.detail.value;
				// 如果选择的城市与目的地相同，则自动切换目的地
				if (index == this.toCityIndex) {
					this.toCityIndex = this.fromCityIndex;
				}
				this.fromCityIndex = index;

				// 更新港口ID和城市名称
				if (this.portList[index]) {
					this.fromPortId = this.portList[index].portID;
					this.fromCity = this.portList[index].portCName;
				}

				// 重新加载船票列表
				this.$refs.paging.reload();
			},

			// 目的地城市选择变化
			bindToCityChange(e) {
				const index = e.detail.value;
				// 如果选择的城市与出发地相同，则自动切换出发地
				if (index == this.fromCityIndex) {
					this.fromCityIndex = this.toCityIndex;
				}
				this.toCityIndex = index;

				// 更新港口ID和城市名称
				if (this.portList[index]) {
					this.toPortId = this.portList[index].portID;
					this.toCity = this.portList[index].portCName;
				}

				// 重新加载船票列表
				this.$refs.paging.reload();
			},

			// 交换出发地和目的地
			swapCities() {
				this.isSwapping = true;

				setTimeout(() => {
					// 交换索引
					const tempIndex = this.fromCityIndex;
					this.fromCityIndex = this.toCityIndex;
					this.toCityIndex = tempIndex;

					// 交换港口ID
					const tempPortId = this.fromPortId;
					this.fromPortId = this.toPortId;
					this.toPortId = tempPortId;

					// 交换城市名称
					const tempCity = this.fromCity;
					this.fromCity = this.toCity;
					this.toCity = tempCity;

					this.isSwapping = false;

					// 重新加载船票列表
					this.$refs.paging.reload();
				}, 300);
			},

			// 获取格式化的日期显示
			getFormattedDateDisplay(dateString) {
				const date = new Date(dateString);
				const month = date.getMonth() + 1;
				const day = date.getDate();

				// 判断日期是今天、明天还是后天
				const today = new Date();
				today.setHours(0, 0, 0, 0);

				const tomorrow = new Date(today);
				tomorrow.setDate(tomorrow.getDate() + 1);

				const afterTomorrow = new Date(today);
				afterTomorrow.setDate(afterTomorrow.getDate() + 2);

				date.setHours(0, 0, 0, 0);

				let dateText = "";
				if (date.getTime() === today.getTime()) {
					dateText = this.$t("common.today");
				} else if (date.getTime() === tomorrow.getTime()) {
					dateText = this.$t("common.tomorrow");
				} else if (date.getTime() === afterTomorrow.getTime()) {
					dateText = this.$t("common.dayAfterTomorrow");
				} else {
					const weekdays = [
						this.$t("common.weekdays.sunday"),
						this.$t("common.weekdays.monday"),
						this.$t("common.weekdays.tuesday"),
						this.$t("common.weekdays.wednesday"),
						this.$t("common.weekdays.thursday"),
						this.$t("common.weekdays.friday"),
						this.$t("common.weekdays.saturday"),
					];
					dateText = weekdays[date.getDay()];
				}

				return `${month < 10 ? "0" + month : month}-${
        day < 10 ? "0" + day : day
      } ${dateText}`;
			},

			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 获取指定舱位的票价
			getTicketPrice(ticket, seatType) {
				if (!ticket.cabinList) return ticket.price;
				switch (seatType) {
					case "regular":
						return ticket.regularPrice ?? "--";
					case "vip":
						return ticket.vipPrice ?? "--";
					case "luxury":
						return ticket.luxuryPrice ?? "--";
					default:
						return ticket.price;
				}
			},
		},
	};
</script>

<template>
	<view class="list-container">
		<z-paging ref="paging" v-model="tickets" @query="queryList" refresher-enabled>
			<!-- 顶部固定内容 -->
			<template #top>
				<!-- 顶部导航栏 -->
				<view class="header">
					<view class="nav-bar">
						<!-- 路线选择 - 替换原来的page-title -->
						<view class="nav-route-selection">
							<!-- 出发城市选择 -->
							<!-- @change="bindFromCityChange" -->
							<picker  :value="fromCityIndex" :range="cities">
								<text class="city">{{ fromCity }}</text>
							</picker>

							<!-- 方向箭头 -->
							<!-- @click="swapCities" -->
							<view class="direction-arrow" :class="{ rotating: isSwapping }" >
								<text class="arrow-icon">→</text>
							</view>

							<!-- 目的地城市选择 -->
							<!-- @change="bindToCityChange" -->
							<picker  :value="toCityIndex" :range="cities">
								<text class="city">{{ toCity }}</text>
							</picker>
						</view>

						<view class="right-icons"></view>
					</view>

					<!-- 日期选择 -->
					<view class="date-selection">
						<view class="date-navigator">
							<view class="nav-button prev-day" @click="navigateDate(-1)">
								<text>{{ $t("ticket.list.prevDay") }}</text>
							</view>

							<uni-datetime-picker type="date" v-model="selectedDate" :start="datePickerStart"
								:end="datePickerEnd" @change="onDateChange" :clear-icon="false">
								<view class="current-date">
									<text>{{ getFormattedDateDisplay(selectedDate) }}</text>
									<!--                  <view class="date-arrow"></view>-->
								</view>
							</uni-datetime-picker>

							<view class="nav-button next-day" @click="navigateDate(1)">
								<text>{{ $t("ticket.list.nextDay") }}</text>
							</view>
						</view>
					</view>
				</view>
			</template>

			<!-- 船票列表 -->
			<view class="ticket-list">
				<view v-for="ticket in tickets" :key="ticket.id" class="ticket-item" @click="defineFlight(ticket)">
					<!-- 暂时不需要选舱 -->
					<!-- @click="toggleTicketExpand(ticket.id)" -->
					<!-- 主要信息行 -->
					<view class="main-info-row">
						<!-- 船票时间和地点信息 -->
						<view class="ticket-time-info">
							<!-- 出发信息 -->
							<view class="departure">
								<text class="time">{{ ticket.departureTime }}</text>
								<text class="place">{{ ticket.departurePlace }}</text>
							</view>

							<!-- 路线信息 -->
							<view class="route-info">
								<text class="duration">{{ ticket.duration }}</text>
								<image class="ship-icon"
									src="https://wzws.wanshanlundiao.cn/upload/img/20250512/202505121415369158.png"
									mode="aspectFit"></image>
								<text class="ship-name">{{
                  ticket.shipName || $t("ticket.list.newHaizhu")
                }}</text>
							</view>

							<!-- 到达信息 -->
							<view class="arrival">
								<text class="time">{{ ticket.arrivalTime }}</text>
								<text class="place">{{ ticket.arrivalPlace }}</text>
							</view>
						</view>

						<!-- 价格和折叠箭头 -->
						<view class="ticket-right">
							<!-- 价格 -->
							<view class="price-container">
								<view class="price">
									<text class="price-symbol">¥</text>
									<text class="price-value">{{ ticket.price }}</text>
								</view>

								<text class="total-seats">{{
                  $t("ticket.list.totalTickets", { count: ticket.totalSeats })
                }}</text>
							</view>

							<!-- 折叠指示箭头 -->
							<!--   <view class="expand-arrow" :class="{'expanded': activeTicketId === ticket.id}">
                <view class="arrow"></view>
              </view> -->
						</view>
					</view>

					<!-- 座位信息条 -->
					<view class="seat-capacity-row">
						<view class="seat-type-item">
							<image src="https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231616113955.png"
								class="seat-icon"></image>
							<text class="seat-type">{{ $t("ticket.list.economyClass") }}:</text>
							<text class="seat-number">{{ ticket.regularSeats }}张</text>
						</view>
						<view class="seat-type-item">
							<image src="https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231616177090.png"
								class="seat-icon seat-icon-head"></image>
							<text class="seat-type">{{ $t("ticket.list.businessClass") }}:</text>
							<text class="seat-number">{{ ticket.vipSeats }}张</text>
						</view>
						<view class="seat-type-item">
							<image src="https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231616229121.png"
								class="seat-icon seat-icon-luxury"></image>
							<text class="seat-type">{{ $t("ticket.list.firstClass") }}:</text>
							<text class="seat-number">{{ ticket.luxurySeats }}张</text>
						</view>
					</view>

					<!-- 展开的详细信息 -->
					<view class="ticket-detail-wrapper">
						<view class="ticket-detail" :class="{ expanded: activeTicketId === ticket.id }">
							<view class="seat-types">
								<view class="seat-type-item">
									<text class="seat-name">{{
                    $t("ticket.list.economyClass")
                  }}</text>
									<text class="seat-price">¥{{ getTicketPrice(ticket, "regular") }}</text>
									<text class="seat-count">{{ ticket.regularSeats }}张</text>
									<view class="seat-book-btn" :class="{ disabled: ticket.regularSeats <= 0 }"
										@click="bookTicket(ticket, $event, 'regular')">
										<text>{{ $t("ticket.list.book") }}</text>
									</view>
								</view>

								<view class="seat-type-item">
									<text class="seat-name">{{
                    $t("ticket.list.businessClass")
                  }}</text>
									<text class="seat-price">¥{{ getTicketPrice(ticket, "vip") }}</text>
									<text class="seat-count">{{ ticket.vipSeats }}张</text>
									<view class="seat-book-btn" :class="{ disabled: ticket.vipSeats <= 0 }"
										@click="bookTicket(ticket, $event, 'vip')">
										<text>{{ $t("ticket.list.book") }}</text>
									</view>
								</view>

								<view class="seat-type-item">
									<text class="seat-name">{{
                    $t("ticket.list.firstClass")
                  }}</text>
									<text class="seat-price">¥{{ getTicketPrice(ticket, "luxury") }}</text>
									<text class="seat-count">{{ ticket.luxurySeats }}张</text>
									<view class="seat-book-btn" :class="{ disabled: ticket.luxurySeats <= 0 }"
										@click="bookTicket(ticket, $event, 'luxury')">
										<text>{{ $t("ticket.list.book") }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<style scoped lang="scss">
	.list-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 顶部导航栏 */
	.header {
		background-color: #e0f7ff;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 44px;

		.back-btn {
			width: 30rpx;

			image {
				transform: rotate(180deg);
				width: 13rpx;
				height: 24rpx;
			}
		}

		.nav-route-selection {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;

			.city {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
			}

			.direction-arrow {
				margin: 0 30rpx;
				color: #00a0e9;
				transition: transform 0.3s;

				&.rotating {
					transform: rotate(180deg);
				}

				.arrow-icon {
					font-size: 36rpx;
				}
			}
		}

		.right-icons {
			display: flex;
			width: 60rpx;
			height: 60rpx;

			.icon-more,
			.icon-scan {
				font-family: "iconfont";
				font-size: 40rpx;
				margin-left: 30rpx;
				color: #333;
			}
		}
	}

	/* 路线选择 */
	.route-selection {
		display: none;
	}

	/* 日期选择 */
	.date-selection {
		width: 100%;
		display: flex;
		align-items: stretch;
		background-color: #e0f7ff;
		border-bottom: 1px solid #d0eeff;
	}

	.date-navigator {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0 20rpx;

		.nav-button {
			padding: 10rpx 20rpx;
			color: #666;
			font-size: 28rpx;
			display: flex;
			align-items: center;

			&.prev-day:before {
				content: "";
				display: inline-block;
				width: 16rpx;
				height: 16rpx;
				border-left: 2rpx solid #666;
				border-bottom: 2rpx solid #666;
				transform: rotate(45deg);
				margin-right: 10rpx;
			}

			&.next-day:after {
				content: "";
				display: inline-block;
				width: 16rpx;
				height: 16rpx;
				border-right: 2rpx solid #666;
				border-top: 2rpx solid #666;
				transform: rotate(45deg);
				margin-left: 10rpx;
			}
		}

		.current-date {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			height: 70rpx;
			padding: 0 20rpx;

			.date-arrow {
				width: 24rpx;
				height: 24rpx;
				margin-left: 10rpx;
				border-bottom: 2rpx solid #666;
				border-right: 2rpx solid #666;
				transform: rotate(45deg) translateY(-4rpx);
			}
		}
	}

	/* 船票列表 */
	.ticket-list {
		padding: 20rpx;
	}

	.ticket-item {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
		position: relative;
		display: flex;
		flex-direction: column;

		.main-info-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin-bottom: 10rpx;
		}

		.ticket-time-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex: 1;
			max-width: 70%;
			margin-bottom: 15rpx;

			.departure,
			.arrival {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 120rpx;

				.time {
					font-size: 34rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}

				.place {
					font-size: 24rpx;
					color: #666;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 100%;
				}
			}

			.route-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 15rpx;
				margin-bottom: 15rpx;

				.ship-icon {
					width: 180rpx;
					height: 18rpx;
				}

				.duration {
					font-size: 22rpx;
					color: #999;
				}

				.ship-name {
					font-size: 22rpx;
					color: #999;
				}
			}
		}

		.ticket-right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			min-width: 30%;

			.price-container {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.price {
					display: flex;
					align-items: baseline;

					.price-symbol {
						font-size: 26rpx;
						color: #ff5233;
					}

					.price-value {
						font-size: 36rpx;
						font-weight: bold;
						color: #ff5233;
					}
				}

				.total-seats {
					font-size: 22rpx;
					color: #999;
					margin-top: 8rpx;
				}
			}

			.expand-arrow {
				width: 36rpx;
				height: 36rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 12rpx;
				transition: all 0.3s;

				.arrow {
					width: 14rpx;
					height: 14rpx;
					border-right: 2rpx solid #999;
					border-bottom: 2rpx solid #999;
					transform: rotate(45deg);
					transition: all 0.3s;
				}

				&.expanded .arrow {
					transform: rotate(-135deg);
				}
			}
		}
	}

	.ticket-detail-wrapper {
		width: 100%;
		clear: both;
		overflow: hidden;

		.ticket-detail {
			max-height: 0;
			overflow: hidden;
			transition: all 0.3s ease-in-out;
			opacity: 0;
			transform: translateY(-10rpx);

			&.expanded {
				max-height: 500rpx;
				/* 足够大的值以容纳内容 */
				opacity: 1;
				transform: translateY(0);
				border-top: 1px dashed #eee;
				padding-top: 15rpx;
			}

			.seat-types {
				display: flex;
				flex-direction: column;
				width: 100%;
			}
		}
	}

	.seat-type-item {
		width: 100%;
		padding: 12rpx 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		&:last-child {
			border-bottom: none;
		}

		.seat-name {
			font-size: 24rpx;
			color: #333;
			flex: 1;
		}

		.seat-price {
			font-size: 30rpx;
			font-weight: bold;
			color: #ff5233;
			flex: 1;
			text-align: center;
		}

		.seat-count {
			font-size: 22rpx;
			color: #999;
			flex: 1;
			text-align: center;
		}

		.seat-book-btn {
			width: 110rpx;
			height: 56rpx;
			background-image: linear-gradient(180deg, #fa452d 0%, #fa822d 100%);
			border-radius: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			&.disabled {
				background-image: none;
				background-color: #cccccc;
			}

			text {
				color: #fff;
				font-size: 24rpx;
			}
		}
	}

	/* 座位信息条 */
	.seat-capacity-row {
		width: 100%;
		display: flex;
		padding: 6rpx 10rpx;
		clear: both;

		.seat-type-item {
			display: flex;
			align-items: center;
			margin-right: 20rpx;

			.seat-icon {
				width: 22rpx;
				height: 22rpx;
				color: #999;
				margin-right: 4rpx;
			}

			.seat-icon-head {
				color: #498fff;
			}

			.seat-icon-luxury {
				color: #ff5233;
			}

			.seat-type {
				font-size: 22rpx;
				color: #666;
			}

			.seat-number {
				font-size: 22rpx;
				color: #498fff;
				font-weight: 500;
			}
		}
	}
</style>